<template>
  <div class="home">
    <h1>home页面</h1>
    <div>
      <el-table :data="stu" style="width: 100%">
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="age" label="年纪" width="180"> </el-table-column>
        <el-table-column prop="gender" label="性别"> </el-table-column>
        <el-table-column prop="phone" label="电话"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button @click="show(scope.row)" type="text" size="small"
              >查看</el-button
            >
            <el-button type="text" size="small" @click="change(scope.row)"
              >修改</el-button
            >
            <el-button type="text" size="small" @click="delOne(scope.row)"
              >删除</el-button
            >
            <el-button type="text" size="small" @click="addOne()"
              >增加</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: "Home",
  components: {
    // HelloWorld
  },
  data() {
    return {
      stu: [],
    };
  },
  methods: {
    show(item) {
      // console.log(item.id);
      this.$router.push({ path: "/about", query: { item: item } });
      //  this.$route取参数
    },
    change(item) {
      // console.log(item.id);
      this.$router.push({ path: "/Change", query: { item: item } });
    },
    // 删除一个数据
    delOne(item) {
      console.log(item, "删除数据");
      this.$store.dispatch("del", item.id);
    },
    // 增加一条数据
    addOne() {
        this.$router.push({ path: "/Add"});
    },
  },
  mounted() {
    let self = this;
    // 拿到状态机的数据
    // console.log(this.$store.state.stu);
    self.stu = this.$store.state.stu;
  },
};
</script>
